<template>
  <div class="monitor-page">
    <Card class="search-banner">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-search>
    </Card>
    <Row :gutter="6" class="top-part">
      <Col span="12" style="height: 100%">
        <div class="bigShow" @click="showBig = true">
          <small-card :data="energyInfo"></small-card>
        </div>
      </Col>
      <Col span="12" style="height: 100%">
        <Card>
          <starLine
            :config="lineConfig"
            :language="lineLanguage"
            :data="chartData"
          ></starLine>
        </Card>
      </Col>
    </Row>
    <cfg-sheet v-bind="bindConfig"></cfg-sheet>
    <Modal v-model="showBig" width="1000">
      <big-card v-if="showBig" :isReturn="false" :data="energyInfo"></big-card>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import smallCard from "./smallCard.vue";
import bigCard from "./bigCard.vue";
import mixin from "@/pages/components/mixins/mixin";
import { myRequest } from "public/service/api/myRequest";
export default {
  components: { TableSearch, smallCard, bigCard },
  mixins: [mixin],
  props: {
    queryFormItem: {
      default: () => [],
    },
    collapseFormItem: {
      default: () => [],
    },
    type: {
      default: "",
    },
    sourceData: {
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showBig: false,
      filter: {},
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        grid: {
          bottom: 40,
        },
      },
      lineLanguage: {
        "en-US": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      chartData: {},
      bindConfig: {
        showTotal: false,
        columns: [
          {
            type: "index",
            width: 70,
            align: "center",
          },
          {
            title: "批次号",
            key: "batchNo",
            minWidth: 100,
          },
          {
            title: "产物批次号",
            key: "productBatchNo",
            minWidth: 120,
          },
          // {
          //   title: "类型",
          //   key: "type",
          //   minWidth: 120,
          // },
          // {
          //   title: "类型名称",
          //   key: "typeName",
          //   minWidth: 120,
          // },
          {
            title: "工艺",
            key: "technology",
            minWidth: 120,
          },
          // {
          //   title: "规格",
          //   key: "materialNo",
          //   minWidth: 120,
          // },
          {
            title: "设备",
            key: "equName",
            minWidth: 120,
          },
          {
            title: "产量",
            key: "quantity",
            minWidth: 120,
          },
          {
            title: "单位",
            key: "unit",
            minWidth: 120,
          },
          {
            title: "单价",
            key: "unitPrice",
            minWidth: 120,
          },
          // {
          //   title: "折算率",
          //   key: "convertRatio",
          //   minWidth: 120,
          // },
          // {
          //   title: "折算用量",
          //   key: "actualQuantity",
          //   minWidth: 120,
          // },
          // {
          //   title: "成本",
          //   key: "cost",
          //   minWidth: 120,
          // },
          // {
          //   title: "折算成本",
          //   key: "actualCost",
          //   minWidth: 120,
          // },
          {
            title: "开始时间",
            key: "startTime",
            minWidth: 120,
          },
          {
            title: "结束时间",
            key: "endTime",
            minWidth: 120,
          },
          // {
          //   title: "创建时间",
          //   key: "createTime",
          //   minWidth: 120,
          // },
          // {
          //   title: "更新时间",
          //   key: "updateTime",
          //   minWidth: 120,
          // },
        ],
        data: [],
      },
      labelWidth: 80,
      energyInfo: {
        accumulatedEnergy: {
          number: 2000,
          data: {
            categories: [],
            values: {},
          },
        },
        energySameRadio: {
          number: 20,
          isAdd: false,
          data: {
            categories: [],
            values: {},
          },
        },
        energyChainRadio: {
          number: 10,
          isAdd: true,
          data: {
            categories: [],
            values: {},
          },
        },
      },
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      myRequest({
        url: "/star4.0/quantityStatistics/queryLineRatioStatistics",
        method: "post",
        data: { ...this.sourceData },
      }).then((res) => {
        console.log("🚀 ~ getList ~ res:", res);
        let { categories, values } = res.accumulatedEnergy;
        this.$set(this, "chartData", {
          categories,
          values: this.transValues(values),
        });
        this.energyInfo.accumulatedEnergy.data.categories =
          res.accumulatedEnergy.categories;
        this.energyInfo.accumulatedEnergy.number = Object.values(
          res.accumulatedEnergy.dataValues
        )[0];
        this.energyInfo.accumulatedEnergy.data.values =
          res.accumulatedEnergy.values;
        this.energyInfo.energySameRadio.data.categories =
          res.energySameRadio.categories;
        this.energyInfo.energySameRadio.number = Object.values(
          res.energySameRadio.dataValues
        )[0];
        this.energyInfo.energySameRadio.data.values =
          res.energySameRadio.values;
        this.energyInfo.energyChainRadio.data.categories =
          res.energyChainRadio.categories;
        this.energyInfo.energyChainRadio.data.values =
          res.energyChainRadio.values;
        this.energyInfo.energyChainRadio.number = Object.values(
          res.energyChainRadio.dataValues
        )[0];
        this.energyInfo;
        this.$set(this.bindConfig, "data", res.dataList || []);
        console.log(this.bindConfig,"this.bindConfig");
      });
    },
    handleSearch() {
      let { energyType, scale, timeRange, beginTime, endTime } = this.filter;
      if (!energyType || !scale || !timeRange) {
        this.$Message.error("请选择能源类型、粒度和时间区间");
        return;
      }
      if (!!timeRange && Array.isArray(timeRange)) {
        beginTime = timeRange[0];
        endTime = timeRange[1];
      }
      //当粒度是分钟，由于后台数据量大，只能选择一天时间
      let diffTime = this.tools
        .dayjs(endTime)
        .diff(this.tools.dayjs(beginTime));
      if (scale == "分" && diffTime > 60 * 60 * 24 * 1000) {
        this.$Message.error("粒度为分，最多选择一天时间");
        return;
      }
      let params = { ...this.filter, beginTime, endTime };
      this.$api.Custom.energyMonitor(params).then((res) => {
        if (!res) {
          return;
        }
        let { categories, values } = res;
        this.$set(this, "chartData", {
          categories,
          values: this.transValues(values),
        });
        this.$set(this.bindConfig, "data", res.dataList || []);
      });
    },
    handleReset() {
      this.filter = {};
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.data;
      });
      return obj;
    },
  },
};
</script>
<style scoped lang="scss">
.monitor-page {
  padding-top: 10px;
}
.search-banner {
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
  p {
    text-align: center;
  }
}
.bigShow {
  width: 100%;
  height: 333px;
  cursor: pointer;
}
::v-deep .ivu-modal-footer {
  border-top: none;
}
</style>
